<template>
  <div>我今年的年纪 <input type="text" v-model.number="age" /></div>
  <div>我明年的年纪 {{ nextAge }}</div>
  <div>我后年的年纪 <input type="text" v-model.number="nextAge2" /></div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const age = ref(18)

// 知识点：
//    在 setup 中，计算属性可通过 computed 函数实现

// 写法1：不带 set 的写法，计算出结果并返回
const nextAge = computed(() => {
  // 记得 return 返回计算结果
  return age.value + 1
})

// 写法2：带 set 的写法，computed 也需要双向绑定的时候会用到
const nextAge2 = computed({
  get() {
    // 后年的年龄为 今年的年龄 + 2
    return age.value + 2
  },
  // val 为用户在输入框输入的值
  set(val: number) {
    // val         后年年龄
    // age.value   今年年龄
    age.value = val - 2
  },
})
</script>
